<template>
  <div class="root">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>数据分析</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-row :gutter="30">
    <el-col :span="6">
      <el-card class="top">
        <el-row>
          <el-col :span="8">客户数量</el-col>
          <el-col :span="8" :offset="8">
            <el-date-picker
              type="year"
              size="small"
              v-model="date1"
              :default-value="date1"
              @change="handleChange1"
              value-format="YYYY"
            />
          </el-col>
          <el-col :span="24" style="margin-top: 10px">
            {{ customData }}
          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card class="top">
        <el-row>
          <el-col :span="8">合同金额</el-col>
          <el-col :span="8" :offset="8">
            <el-date-picker
              type="year"
              size="small"
              v-model="date2"
              value-format="YYYY"
              :default-value="date2"
              @change="handleChange2"
            />
          </el-col>
          <el-col :span="24" style="margin-top: 10px">
            {{ contractAmount }}
          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card class="top">
        <el-row>
          <el-col :span="8">已收金额</el-col>
          <el-col :span="8" :offset="8">
            <el-date-picker
              type="year"
              size="small"
              v-model="date3"
              value-format="YYYY"
              :default-value="date3"
              @change="handleChange3"
            />
          </el-col>
          <el-col :span="24" style="margin-top: 10px">
            {{ receiveAmount }}
          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card class="top">
        <el-row>
          <el-col :span="8">尾款金额</el-col>
          <el-col :span="8" :offset="8">
            <el-date-picker
              type="year"
              size="small"
              v-model="date4"
              value-format="YYYY"
              :default-value="date4"
              @change="handleChange4"
            />
          </el-col>
          <el-col :span="24" style="margin-top: 10px">
            {{ finalAmount }}
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <!-- 图表 -->
  <!-- 1 -->
  <el-card style="margin-top: 20px">
    <template #header>各行成交业绩</template>
    <div id="chart1" ref="chart1" style="width: auto; height: 300px"></div>
  </el-card>
  <!-- 2 -->
  <el-card style="margin-top: 20px">
    <template #header> </template>
    <div id="chart2" ref="chart2" style="width: auto; height: 300px"></div>
  </el-card>

  <el-row>
    <!-- 3 -->
    <el-col :span="12">
      <el-card style="margin-top: 20px; margin-right: 10px">
        <template #header>
          <el-row>
            <el-col :span="8">各行成交业绩</el-col>
            <el-col :span="4" :offset="12">
              <el-date-picker
                type="year"
                v-model="select1"
                value-format="YYYY"
                :default-value="select1"
                @change="selectChange1"
              />
            </el-col>
          </el-row>
        </template>
        <div id="chart3" ref="chart3" style="width: auto; height: 300px"></div>
      </el-card>
      <!-- 4 -->
    </el-col>
    <el-col :span="12">
      <el-card style="margin-top: 20px; margin-left: 10px">
        <template #header>各行成交业绩</template>
        <div id="chart4" ref="chart4" style="width: auto; height: 300px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  getcustomData,
  getcontractAmunt,
  getreceiveAmount,
  getfinalAmount,
  getindustryData,
  getallContract,
} from "../api/api";
import * as echarts from "echarts";

//数据
const year = new Date().getFullYear();
const date1 = ref(String(year));
const date2 = ref(String(year));
const date3 = ref(String(year));
const date4 = ref(String(year));
const customData = ref(0);
const contractAmount = ref(0);
const receiveAmount = ref(0);
const finalAmount = ref(0);
const handleChange1 = async () => {
  let res = await getcustomData({ year: date1.value });
  if (res.data.data.code == 10000) {
    customData.value = res.data.data.count;
  } else {
    customData.value = 0;
  }
};
const handleChange2 = async () => {
  let res2 = await getcontractAmunt({ year: date2.value });
  if (res2.data.data.code == 10000) {
    contractAmount.value = res2.data.data.count;
  } else {
    contractAmount.value = 0;
  }
};
const handleChange3 = async () => {
  let res3 = await getreceiveAmount({ year: date3.value });
  if (res3.data.data.code == 10000) {
    receiveAmount.value = res3.data.data.count;
  } else {
    receiveAmount.value = 0;
  }
};
const handleChange4 = async () => {
  let res4 = await getfinalAmount({ year: date4.value });
  if (res4.data.data.code == 10000) {
    finalAmount.value = res4.data.data.count;
  } else {
    finalAmount.value = 0;
  }
};

onMounted(async () => {
  let res1 = await getcustomData({ year: date1.value });
  customData.value = res1.data.data.count;
  let res2 = await getcontractAmunt({ year: date2.value });
  contractAmount.value = res2.data.data.count;
  let res3 = await getreceiveAmount({ year: date3.value });
  receiveAmount.value = res3.data.data.count;
  let res4 = await getfinalAmount({ year: date4.value });
  finalAmount.value = res4.data.data.count;
  let selectone = await getallContract({ year: select1.value });
  selectData.value = selectone.data.data.row;
  console.log(selectData.value);
  renderChart();
});

//图表

const chart1 = ref();
const chart2 = ref();
const chart3 = ref();

const select1 = ref(String(year));
const selectData = ref<{
  year: string;
  contract_amount: number;
  receive_amount: number;
  final_amount: number;
}>();
const selectChange1 = async () => {
  const res = await getallContract({ year: select1.value });
  if (res.data.data.code === 10000) {
    selectData.value = res.data.data.row;
  } else {
    selectData.value = {
      year: select1.value,
      contract_amount: 0,
      receive_amount: 0,
      final_amount: 0,
    };
  }
};

const renderChart = async () => {
  const res = await getindustryData();
  const data1 = res.data.data.count.map((v) => v.industry);
  const data2 = res.data.data.count.map((v) => v.value);
  const fa = await getallContract({ year: select1.value });
  if (fa.data.data.code === 10000) {
    selectData.value = fa.data.data.row;
  } else {
    selectData.value = {
      year: select1.value,
      contract_amount: 0,
      receive_amount: 0,
      final_amount: 0,
    };
  }

  // 绘制图表1
  let myChart1 = echarts.init(chart1.value);
  myChart1.setOption({
    title: {},
    toolbox: {
      feature: {
        dataView: { readOnly: false },
        saveAsImage: {},
      },
    },
    tooltip: {},
    xAxis: {
      data: data1,
    },
    yAxis: {},
    series: [
      {
        name: "销售额",
        type: "bar",
        data: data2,
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
      },
    ],
  });
  // 绘制图表2
  const myChart4 = echarts.init(chart2.value);
  myChart4.setOption({
    title: {
      text: "销售额",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["销售额"],
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "销售额",
        type: "line",
        data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
        areaStyle: {},
      },
    ],
  });

  //绘制图表3
  const myChart3 = echarts.init(chart3.value);
  myChart3.setOption({
    title: {},
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: selectData.value?.final_amount, name: "尾款金额" },
          { value: selectData.value?.receive_amount, name: "已收金额" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
};
</script>

<style scoped>
.root {
  padding: 20px, 0;
  border-bottom: 1px #504d4d solid;
}

.top {
  height: 100px;
  --el-date-editor-width: 100px;
}

.el-row :deep(.el-date-editor) {
  width: 100px;
}
</style>
